$(function(){
  let menu = $('#carousel'),
  imgs     = $('#carousel>#carousel_image_container>li'),
  lis      = $('#carousel>#carousel_li_container>li'),
  left     = $('#carousel>#carousel_controller>#carousel_controller_left'),
  right    = $('#carousel>#carousel_controller>#carousel_controller_right'),
  ull      = $('#carousel>#carousel_image_container');
  let picIndex = 0;
  let picWidth = menu.width();
  console.log(picWidth);
  let temp ;
  let temp1;
  function animate (elm,target){
    clearInterval(temp);
    temp = setInterval(()=>{
      let current = elm.position().left; 
      let step    = 10;
      step = current>target? -step:step;
      current+=step;
      if(Math.abs(target - current) > Math.abs(step)){
        elm.css('left',current+'px')
      }else{
        elm.css('left',target+'px')
      }
    },.5)
  }
  function event(){
    picIndex++;
    if(picIndex ==lis.length){
      picIndex = 0;
    animate(ull,-picIndex * picWidth)
    }
    lis.each((i,elm)=>{$(elm).removeClass('active');});
    imgs.each((i,elm)=>{$(elm).removeClass('active');});
    lis.eq(picIndex).addClass('active');
    imgs.eq(picIndex).addClass('display');
    animate(ull,-picIndex * picWidth)
  }
   menu.on({
     mouseover(){
      clearInterval(temp1);
     },mouseout(){
      temp1 = setInterval(()=>{event()},1000)}
   })
    lis.on('click',function(){
      $(this).addClass('active').siblings().removeClass('active');
      picIndex = lis.index(this);
      animate(ull,-picIndex*picWidth)
    })
    right.on('click',function(){event()});
    left.on('click',function(){
      picIndex--;
      if(picIndex ==-1){
        picIndex  = lis.length-1;
      }
      lis.each((i,elm)=>{$(elm).removeClass('active');});
      imgs.each((i,elm)=>{$(elm).removeClass('active');});
      lis.eq(picIndex).addClass('active');
      imgs.eq(picIndex).addClass('display');
      animate(ull,-picIndex * picWidth)
    })
   
      
 



})